<template>
  <div class="app-container">
    <el-form
      inline
      size="small"
      ref="queryForm"
      :model="queryParams"
      v-show="showSearch"
      label-width="68px"
    >
      <el-row>
        <el-form-item label="" v-if="orderNo">
          <div style="display: flex">
            <div style="color: #5473E8;width: 300px">
              当前负责人：{{ headName }}
            </div>
            <div style="color: #027db4;width: 300px">
              当前发车员：{{ departureAttendant }}
            </div>
            <div style="color: #ff7e00">
              当前收车员：{{ vehicleCollector }}
            </div>
          </div>
        </el-form-item>
      </el-row>

      <el-form-item label="人员搜索" prop="nickName">
        <el-input
          style="width: 215px"
          v-model="queryParams.nickName"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-table :data="list" border>
      <el-table-column
        label="所属部门"
        prop="deptName"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="人员角色"
        prop="roleName"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="人员姓名"
        prop="nickName"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="手机号"
        prop="phone"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="当前订单数"
        prop="orderNumber"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="操作" width="280" align="center" fixed="left">
        <template slot-scope="{ row }">
          <template v-if="orderNo">
            <el-button
              type="text"
              size="mini"
              @click="handle(row,1)"
              style="color: #027db4"
              v-if="orderStatus<4&&reserveTakeStoreId==row.storeId&&checkPermi(['order:orderBasic:distribution'])"
            >设为发车员</el-button>
            <el-button
              type="text"
              size="mini"
              @click="handle(row,2)"
              style="color: #ff7e00"
              v-hasPermi="['order:orderBasic:distribution']"
            >设为收车员</el-button>
            <el-button
              type="text"
              size="mini"
              @click="handle(row,0)"
              style="color: #5473E8"
              v-if="reserveTakeStoreId==row.storeId&&checkPermi(['order:orderBasic:distribution'])"
            >设为负责人</el-button>
          </template>
          <template v-else >
            <el-button
              type="text"
              size="mini"
              @click="handleNoOrder(row)"
              v-hasPermi="['order:orderBasic:distribution']"
            >分配人员</el-button>
          </template>

        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import * as api from '@/api/order/index'
import Template from "@/views/system/template";
import {checkPermi} from "@/utils/permission";

export default {
  components: {Template},
  props: ['orderNo', 'reserveTakeStoreId', 'reserveAlsoStoreId'],
  data() {
    return {
      list: [],
      // 总条数
      total: 0,
      // 显示搜索条件
      showSearch: true,
      headName:"",
      departureAttendant:"",
      vehicleCollector:"",
      orderStatus:0,
      queryParams: {
        orderNo: this.orderNo,
        reserveTakeStoreId: this.reserveTakeStoreId,
        reserveAlsoStoreId: this.reserveAlsoStoreId,
        nickName: '', //车牌号
        pageNum: 0, //页码   必选
        pageSize: 10, //每页显示数据 必选
      },
    }
  },
  mounted() {
    this.getList()
    if(this.orderNo){
      this.getSalesman();
    }
  },
  methods: {

    checkPermi,
    getSalesman(){
      api.getSalesman({orderNo: this.orderNo}).then((response) => {
        this.headName = response.data.headName
        this.departureAttendant = response.data.departureAttendant
        this.vehicleCollector = response.data.vehicleCollector
        this.orderStatus = response.data.orderStatus
      })
    },
    getList() {
      api.geUserlist(this.queryParams).then((response) => {
        this.list = response.rows
      })
    },
    // 确定配车
    handle(row,type) {
      const data = {
        orderNo: this.orderNo,
        userId: row.userId,
        nickName: row.nickName,
        type:type
      }
      api.distribution(data).then((response) => {
        this.$modal.msgSuccess('操作成功')
        this.getSalesman();
      })
    },
    // 确定配车
    handleNoOrder(row) {
      const data = {
        orderNo: this.orderNo,
        userId: row.userId,
        nickName: row.nickName,
      }
      this.$emit('close', data)
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
  },
}
</script>
